<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Excellent community</title>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
		<script type="text/javascript" src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="./css/community.css" />
    <script src="./js/community.js"></script>
</head>
<body>
    <div id="app" class="container">
            <div class="row">
                <div class="col-md-3 left">
                    <div class="title">
                        <img width="120px" src="./image/community.jpg"><br>
                        <span class="titlespan">Excellent <span style="color:#aaa;font-weight:bold">community</span></span><br>
                        <small>精选优质社区</small><br>
                    </div>
                    <div class="navbar list-group">
                        <router-link to="/design" class="list-group-item">设计</router-link>
                        <router-link to="/article" class="list-group-item">艺术</router-link>
                        <router-link to="/audio" class="list-group-item">音影</router-link>
                        <router-link to="/tool" class="list-group-item">工具</router-link>
                        <router-link to="source" class="list-group-item">素材</router-link>
                        <router-link to="/inspiration" class="list-group-item">灵感</router-link>
                        <router-link to="/brain" class="list-group-item">在线作品集</router-link>
                    </div>
                </div>
                <div class="col-md-9 right">
                        <router-view></router-view>
                </div>
            </div>
    </div>
    <template id="design">
       <div id="vuedesign" >
       <div class="vuedesignheader">设计</div>
       <div class="listcontainer">
          <span class="rightlisttitle"  v-for="rightlist in books">
              <a :href="rightlist.href">
                <strong class="listtitle">{{rightlist.title}}<br><small>{{rightlist.introduce}}</small>
                    <br><small>{{rightlist.Enintroduce}}</small></strong>
                <img :src="rightlist.src">
            </a>
            <span class="rightbtm"><img id="hert" src="./image/community/heart.png"></span>
          </span>
        </div>
       </div>
    </template>
    <template id="article">
        <div class="vuedesignheader">艺术</div>
    </template>
    <template id="audio">
        <div class="vuedesignheader">影音</div>
    </template>
    <template id="tool">
        <div class="vuedesignheader">工具</div>
    </template>
    <template id="source">
        <div class="vuedesignheader">素材</div>
    </template>
    <template id="inspiration">
        <div class="vuedesignheader">灵感</div>
    </template>
    <template id="brain">
        <div class="vuedesignheader">脑洞</div>
    </template>
<script>
const Design=Vue.extend({
    template:"#design",
    data(){
        return{
            books:[
                {src:"./image/community/198cc4aa43548069892bab5c3207f663.png",Enintroduce:"Friend with design",introduce:"国内知名视觉设计师社区",title:"视觉中国",href:"http://shijue.me/"},
                {src:"./image/community/21eafce001739230ca544e5763913b8b.jpg",Enintroduce:"Play with creativity",introduce:"国内知名综合设计师社区",title:"站酷",href:"http://www.zcool.com.cn/"},
                {src:"./image/community/2a43ddc477ea389606658bfc33b1a735.png",Enintroduce:"Being a life Designer",introduce:"采集你最美的爱图",title:"花瓣",href:"http://huaban.com/"},
                {src:"./image/community/361e42b731873ce497ee64c3cfe86a7f.png",Enintroduce:"Youth Design Network",introduce:"专注于年轻",title:"Wevux",href:"http://wevux.com/"},
                {src:"./image/community/4948fd268ac5dc15c662dd823ca3c0f2.jpg",Enintroduce:"Visual impact of game",introduce:"热门游戏视觉网",title:"Artstation",href:"https://www.artstation.com/"},
                {src:"./image/community/67f5a86fccfb053366983bb32ceaa80c.jpg",Enintroduce:"Where Designers Get Inspired And Hired",introduce:"启发设计师平台",title:"Dribbble",href:"https://dribbble.com/"},
                {src:"./image/community/67f5a86fccfb053366983bb32ceaa822.bmp",Enintroduce:"The Global Network For Creatives",introduce:"全球创意设计",title:"Uplabs",href:"https://www.uplabs.com/"},
                {src:"./image/community/94ae1ab2db995da864656da699695848.png",Enintroduce:"Find good design",introduce:"国内新鲜设计平台",title:"设计癖",href:"http://www.shejipi.com/"},
                {src:"./image/community/9afce7cea33b1f270fa61a168bc790cc.bmp",Enintroduce:"Magazine wind vane",introduce:"设计类杂志圣经",title:"Wallpaper",href:"https://www.wallpaper.com/"},
                {src:"./image/community/ad3c8637802b4a1d860765c88d1a1499.png",Enintroduce:"Landing Page Design Inspiration",introduce:"网页设计灵感库",title:"Lapa",href:"https://www.lapa.ninja/"},
                {src:"./image/community/af498e4360d9202d248fee6c0317f871.jpg",Enintroduce:"design intern portfolios",introduce:"顶尖设计实习生",title:"Cofolios",href:"http://cofolios.com/"},
                {src:"./image/community/b53c0cf8df102608219259bbb15ccce55.bmp",Enintroduce:"Global design classroom",introduce:"国外设计作品集",title:"全球设计精品收录",href:"http://www.doooor.com/"},
              
              
            ]
        }
    }
});
const article=Vue.extend({
    template:"#article"
});
const audio=Vue.extend({
    template:"#audio"
});
const tool=Vue.extend({
    template:"#tool"
});
const source=Vue.extend({
    template:"#source"
});
const inspiration=Vue.extend({
    template:"#inspiration"
});
const brain=Vue.extend({
    template:"#brain"
});

const routes=[
    {path:"/design",component:Design},
    {path:"/article",component:article},
   {path:"/audio",component:audio},
    {path:"/tool",component:tool},
    {path:"/source",component:source},
    {path:"/inspiration",component:inspiration},
    {path:"/brain",component:brain},
    {path:'/',redirect:'/design'}

];
const router=new VueRouter({
    routes:routes
})
var app=new Vue({
    router:router,
}).$mount("#app")



//Jquery区
//$(".rightbtm>img").attr('src','./image/community/heartclick.png')
</script>
</body>
</html>